<template>
  <div>
    <!-- 列表 -->

    <!-- v-model:关联底部加载状态
    loading: true(转圈)
    loading: false(不再转圈)
    finished:数据全都加载完成，
    true:加载完成后不再触发load事件（底部显示finished-text的文字)
    false:触底继续触发load事件
    @load事件:组件滚动底部时，内部会调用1oad事件触发 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <ArticleItem
          v-for="obj in articlesList"
          :key="obj.art_id"
          :articlesList="obj"
          @click.native="articleClickFn(obj.art_id)"
        ></ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 目标:文章列表铺设
// 1.找到接口,·写api/index.js->接口方法
// ·2.-ArticleList引入,发起文章列表请求拿到数据
// ·3.-v-for遍历article-item,·传入数据对象展示数据

// 组件套路
// 1 找到类似的,复制过来,使用运行看效果
// 2．删除无用的
// 3．修改(读属性/直接改文字/标签数量)
// 4．其他....
// 目标:底部加载更多组件（van-list)
// 重要1:当组件滚动到底部时，会触发load事件并将 loading设置成true
// 重要2:finished:加载完成，加载完成后不再触发load事件

// 目标:触底，在发请求，拿到下一页数据
// 1．接口文档:发现需要传递timestamp时间戳
// 下一页数据需要传递上一次接口返回的pre_timestamp的时间值
// 2. data函数里nextTime，专门用于保存紧挨着的上一次的pre_timestamp的值
// 3.onLoad触底加载更多事件方法中,把nextTime传入API接口方法内
// 4．修改api/index.js相应接口，接收timestamp值(不能固定的)

// 目标:-下拉刷新(顶部刷新)
// ·js原生实现:
// ·移动端特有事件名:touchstart touchmove touchend
// ·获取手指在屏幕的坐标点,移动后,手指坐标点,手指离开屏幕触发touchend·获取到手指偏移量,修改标签的位移量·(加c3过渡动画)
// ·采用PullRefresh的组件
// .1.·找到包在van-list组件外面
// ·2.把变量和方法定义好
// ·3.·刷新方法里,清空数组，把nextTime=new-Date(),·重新请求一次新的数据
// 4.refreshing的状态:false

import ArticleItem from '@/components/ArticleItem.vue'
import { getArticlesAPI } from '@/api'
export default {
  props: {
    channelId: Number
  },
  async created () {
    // tab在切换的时候,如果是第一次出现,会走一次created
    // 切回去的时候created不走了,但是标签没动(横向的位移)
    // res.data (axios内,把后台返回的数据对象放到了data字段下)
    // 后台数据对象里,还有个data，所以需要.2次data

    this.getArticleList()
  },
  data () {
    return {
      articlesList: [],
      list: [],
      loading: false,
      finished: false,
      nextTime: new Date(),
      isLoading: false
    }
  },
  methods: {
    async getArticleList () {
      const res = await getArticlesAPI({
        channel_id: this.channelId,
        timestamp: this.nextTime
      })
      // console.log(res)
      this.articlesList = [...this.articlesList, ...res.data.data.results]
      // 如果pre_timestamp本次为null,没有下一页的数据
      if (res.data?.data?.pre_timestamp === null) {
        this.finished = true
        this.nextTime = null
      } else {
        this.nextTime = res.data.data.pre_timestamp
      }
      this.loading = false // 本次加载完毕(这样下次触底,才能再触发load事件和onLoad方法)
    },
    async onLoad () {
      // 异步更新数据
      // const res = await getArticlesAPI({
      //   channel_id: this.channelId,
      //   timestamp: this.nextTime
      // })
      // // console.log(res)
      // this.articlesList = [...this.articlesList, ...res.data.data.results]
      // this.nextTime = res.data.data.pre_timestamp

      // this.loading = false
      if (this.articlesList.length > 0) {
        // 上来你先走created请求，把数据拿回来铺设页面，等用户真的滚动到下面了，再次执行load事件，这个判断有数据了，我在请求下一页
        this.getArticleList()
      }
    },
    onRefresh () {
      // console.log(123)
      setTimeout(() => {
        this.getArticleList()
        this.articlesList = []
        // false 表示刷新完成
        this.isLoading = false
      }, 1000)
    },
    articleClickFn (artId) {
      this.$router.push({
        path: '/art_detail',
        query: {
          aid: artId
        }
      })
    }
  },
  components: {
    ArticleItem
  }
}
</script>

<style>
</style>
